<template>
  <div class="system-monitor">
    <h2>系统监控</h2>
    <p>实时监控平台运行状态与告警信息。</p>
    <button @click="startDetection" class="detect-btn">开始检测</button>
    <ul class="monitor-list">
      <li>服务器状态：<span :style="{color: serverStatus==='正常'?'green':'red'}">{{ serverStatus }}</span></li>
      <li>数据库连接：<span :style="{color: dbStatus==='正常'?'green':'red'}">{{ dbStatus }}</span></li>
      <li>API响应：<span :style="{color: apiStatus==='正常'?'green':'red'}">{{ apiStatus }}</span></li>
      <li>告警信息：{{ alarmInfo }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const serverStatus = ref('正常')
const dbStatus = ref('正常')
const apiStatus = ref('正常')
const alarmInfo = ref('无')

async function startDetection() {
    // 更新UI状态为检测中
    serverStatus.value = '检测中...';
    dbStatus.value = '检测中...';
    apiStatus.value = '检测中...';
    alarmInfo.value = '检测中...';

    try {
        const res = await fetch('http://47.108.221.119:5000/check');
        if (!res.ok) {
            throw new Error(`HTTP error! status: ${res.status}`);
        }
        const data = await res.json();

        // 更新UI状态
        serverStatus.value = data.serverStatus;
        dbStatus.value = data.dbStatus;
        apiStatus.value = data.apiStatus;
        alarmInfo.value = data.alarmInfo;

    } catch (error) {
        console.error("检测过程中出现错误:", error);
        // 更新UI状态为错误
        serverStatus.value = '错误';
        dbStatus.value = '错误';
        apiStatus.value = '错误';
        alarmInfo.value = '检测过程中出现错误，请稍后再试。';
    }
}
</script>

<style scoped>
.system-monitor { padding: 2rem; }
.monitor-list { margin-top: 1rem; background: transparent; border-radius: 8px; padding: 1rem; }
.monitor-list li { margin-bottom: 0.5rem; }
.detect-btn {
  background: var(--theme-color, #42b983);
  color: #010101;
  border: none;
  border-radius: 4px;
  padding: 0.5rem 1.2rem;
  font-size: 1rem;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.detect-btn:hover {
  background: var(--theme-color, #369870);
  filter: brightness(0.9);
}
</style>
